<template>
  <div id="app">
    <!-- 卡片区域 -->
    <div class="card">
      <div class="card-header">添加品牌</div>
      <div class="card-body">
        <!-- 行内的表单 -->
        <form class="form-inline">
          <div class="col-auto">
            <label class="sr-only" for="inlineFormInputGroup"></label>
            <div class="input-group mb-2">
              <div class="input-group-prepend">
                <div class="input-group-text">品牌名称</div>
              </div>
              <input
                type="text"
                class="form-control"
                v-model.number.trim="mingc"
              />
            </div>
          </div>
          <div class="col-auto">
            <label class="sr-only" for="inlineFormInputGroup"></label>
            <div class="input-group mb-2">
              <div class="input-group-prepend">
                <div class="input-group-text">品牌价格</div>
              </div>
              <input
                type="text"
                class="form-control"
                v-model.number.trim="jiage"
              />
            </div>
          </div>
          <button type="button" class="btn btn-primary mb-2" @click="add">添加</button>
        </form>
      </div>
    </div>

    <!-- 表格区域 -->
    <table class="table table-bordered mt-2">
      <thead>
        <tr>
          <th>#</th>
          <th>车辆名称</th>
          <th>车辆价格</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody v-if="list.length > 0">
        <tr v-for="(item, index) in list" :key="item.id">
          <td>{{ index + 1 }}</td>
          <td>{{ item.brand }}</td>
          <td :style="{color:item.price>=30? 'red':''}">{{ item.price }}</td>
          <td>{{ item.time | hai}}</td>
          <td>
            <a href="#" @click.prevent.stop="sanchu(item.id)">删除</a>
          </td>
        </tr>
        <tr class="footer">
          <td>统计</td>
          <td colspan="2">总价钱：{{gaile}} </td>
          <td colspan="2">平均价：{{junjia}} </td>
        </tr>
      </tbody>
      <tbody v-else>
        <tr>
          <td colspan="5" class="text-center">没有更多数据</td>
        </tr>
      </tbody>
    </table>
    <div></div>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  data() {
    return {
      mingc: "",
      jiage: "",
      list: [
        { id: 1, brand: "奔驰S450", price: 120, time: new Date("2020-12-12") },
        { id: 2, brand: "奥迪A4", price: 30, time: new Date("2020-12-01") },
        { id: 3, brand: "五菱宏光", price: 8, time: new Date("2020-12-05") },
      ],
    };
  },
  methods: {
    add(){
      if(!this.mingc){
        return alert('输入品牌')
      }
       if(!this.jiage){
        return alert('输入价格')
      }
      this.list.unshift({
        id: new Date,
        brand:this.mingc,
        price:this.jiage,
        time: new Date(),
      })
      this.mingc= ""
      this.jiage= ""
    },
    sanchu(id) {
      this.list = this.list.filter((item) => item.id !== id);
    },
  },
  filters:{
    hai(value){
      return moment(value).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  computed:{
    gaile(){
      return this.list.reduce((sum,item)=>sum+=item.price,0)
    },
    junjia(){
     return this.gaile/this.list.length
    }
  },
};
</script>

<style lang="less">
#app {
  width: 60%;
  margin: 50px auto;
  a {
    margin-right: 5px;
  }
  .footer {
    background-color: rgba(0, 0, 0, 0.05);
  }
}
</style>